<template>
  <div class="radar-chart-container">
    <div class="radar-charts">
      <!-- 蓝色雷达图 - 核心能力 -->
      <div class="radar-chart blue-chart">
        <div class="chart-header">
          <div style="display: flex; gap: 20px">
            <div class="chart-icon blue-icon">
              <div class="icon-dot"></div>
            </div>
            <div class="radar-chart-title">
              <h2>核心能力</h2>
              <p class="chart-subtitle">Core Abilities</p>
            </div>
          </div>
          <div class="stat-card blue-stat">
            <div class="stat-label">平均分</div>
            <div class="stat-value">{{ Math.round(blueData.reduce((a, b) => a + b, 0) / blueData.length) }}</div>
          </div>
        </div>
        <div class="chart-canvas-wrapper">
          <canvas ref="blueChartRef"></canvas>
        </div>
        <div class="legend">
          <div class="legend-item">
            <div class="legend-color blue"></div>
            <span>实际值</span>
          </div>
          <div class="legend-item">
            <div class="legend-color standard"></div>
            <span>标准</span>
          </div>
        </div>
      </div>

      <!-- 黄色雷达图 - 专业技能 -->
      <div class="radar-chart yellow-chart">
        <div class="chart-header">
          <div style="display: flex;gap: 5px">
            <div class="chart-icon yellow-icon">
              <div class="icon-dot"></div>
            </div>
            <div class="radar-chart-title">
              <h2>专业技能</h2>
              <p class="chart-subtitle">Professional Skills</p>
            </div>
          </div>
          <div class="stat-card yellow-stat">
            <div class="stat-label">平均分</div>
            <div class="stat-value">{{ Math.round(yellowData.reduce((a, b) => a + b, 0) / yellowData.length) }}</div>
          </div>
        </div>
        <div class="chart-canvas-wrapper">
          <canvas ref="yellowChartRef"></canvas>
        </div>
        <div class="legend">
          <div class="legend-item">
            <div class="legend-color yellow"></div>
            <span>实际值</span>
          </div>
          <div class="legend-item">
            <div class="legend-color standard"></div>
            <span>标准</span>
          </div>
        </div>
      </div>

      <!-- 红色雷达图 - 岗位表现 -->
      <div class="radar-chart red-chart">
        <div class="chart-header">
          <div style="display: flex">
            <div class="chart-icon red-icon">
              <div class="icon-dot"></div>
            </div>
            <div class="radar-chart-title">
              <h2>综合表现</h2>
              <p class="chart-subtitle">Overall Performance</p>
            </div>
          </div>
          <div class="stat-card red-stat">
            <div class="stat-label">平均分</div>
            <div class="stat-value">{{ Math.round(redData.reduce((a, b) => a + b, 0) / redData.length) }}</div>
          </div>
        </div>
        <div class="chart-canvas-wrapper">
          <canvas ref="redChartRef"></canvas>
        </div>
        <div class="legend">
          <div class="legend-item">
            <div class="legend-color red"></div>
            <span>实际值</span>
          </div>
          <div class="legend-item">
            <div class="legend-color standard"></div>
            <span>标准</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed, nextTick } from 'vue';
import {
  Chart, RadarController, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend
} from 'chart.js';
import {getInterviewScore} from "@/http/m_api/interview";
import { useRoute } from 'vue-router';

// 注册 Chart.js 组件
Chart.register(
    RadarController, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend
);

const route = useRoute();

const resumeId = Number.parseInt(route.params.id as string)

// 响应式数据
const blueData = ref([85, 78, 82, 75, 88]);
const yellowData = ref([90, 85, 80, 88, 92]);
const redData = ref([82, 79, 85, 83, 87]);

// Canvas 引用
const blueChartRef = ref<HTMLCanvasElement | null>(null);
const yellowChartRef = ref<HTMLCanvasElement | null>(null);
const redChartRef = ref<HTMLCanvasElement | null>(null);

// Chart 实例
let blueChart: Chart | null = null;
let yellowChart: Chart | null = null;
let redChart: Chart | null = null;

// 标准数据
const standardData = [70, 70, 70, 70, 70];

// 增强的雷达图配置选项
const radarChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  elements: {
    line: {
      tension: 0
    }
  },
  scales: {
    r: {
      angleLines: {
        display: true,
        color: 'rgba(0, 0, 0, 0.08)',
        lineWidth: 1
      },
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
        lineWidth: 1
      },
      pointLabels: {
        font: {
          size: 13,
          weight: '600',
          family: "'Inter', 'PingFang SC', sans-serif"
        },
        color: '#374151',
        padding: 15
      },
      suggestedMin: 0,
      suggestedMax: 100,
      ticks: {
        display: false,
        backdropColor: 'transparent'
      }
    }
  },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      titleColor: '#1f2937',
      bodyColor: '#374151',
      borderColor: 'rgba(0, 0, 0, 0.1)',
      borderWidth: 2,
      padding: 12,
      cornerRadius: 8,
      boxWidth: 12,
      boxHeight: 12,
      boxPadding: 4,
      usePointStyle: true,
      titleFont: {
        size: 14,
        weight: '600'
      },
      bodyFont: {
        size: 13,
        weight: '500'
      }
    }
  },
  animation: {
    duration: 2000,
    easing: 'easeOutCubic'
  }
};

// 计算属性 - 蓝色雷达图数据
const blueChartData = computed(() => ({
  labels: ['逻辑思维', '问题解决', '团队合作', '抗压能力', '沟通表达'],
  datasets: [{
    label: '核心能力',
    data: blueData.value,
    backgroundColor: 'rgba(59, 130, 246, 0.1)',
    borderColor: '#3b82f6',
    borderWidth: 3,
    pointBackgroundColor: '#3b82f6',
    pointBorderColor: '#fff',
    pointBorderWidth: 3,
    pointRadius: 6,
    pointHoverRadius: 8
  }, {
    label: '标准',
    data: standardData,
    backgroundColor: 'rgba(156, 163, 175, 0.15)',
    borderColor: '#9ca3af',
    borderWidth: 2,
    borderDash: [5, 5],
    pointBackgroundColor: '#9ca3af',
    pointBorderColor: '#fff',
    pointBorderWidth: 2,
    pointRadius: 4,
    pointHoverRadius: 6
  }]
}));

// 计算属性 - 黄色雷达图数据
const yellowChartData = computed(() => ({
  labels: ['技术实操', '案例成果', '项目评估', '工具熟练度', '行业知识'],
  datasets: [{
    label: '专业技能',
    data: yellowData.value,
    backgroundColor: 'rgba(245, 158, 11, 0.1)',
    borderColor: '#f59e0b',
    borderWidth: 3,
    pointBackgroundColor: '#f59e0b',
    pointBorderColor: '#fff',
    pointBorderWidth: 3,
    pointRadius: 6,
    pointHoverRadius: 8
  }, {
    label: '标准',
    data: standardData,
    backgroundColor: 'rgba(156, 163, 175, 0.15)',
    borderColor: '#9ca3af',
    borderWidth: 2,
    borderDash: [5, 5],
    pointBackgroundColor: '#9ca3af',
    pointBorderColor: '#fff',
    pointBorderWidth: 2,
    pointRadius: 4,
    pointHoverRadius: 6
  }]
}));

// 计算属性 - 红色雷达图数据
const redChartData = computed(() => ({
  labels: ['岗位匹配度', '领导能力', '职业稳定性', '学习潜力', '文化适配性'],
  datasets: [{
    label: '岗位表现',
    data: redData.value,
    backgroundColor: 'rgba(239, 68, 68, 0.1)',
    borderColor: '#ef4444',
    borderWidth: 3,
    pointBackgroundColor: '#ef4444',
    pointBorderColor: '#fff',
    pointBorderWidth: 3,
    pointRadius: 6,
    pointHoverRadius: 8
  }, {
    label: '标准',
    data: standardData,
    backgroundColor: 'rgba(156, 163, 175, 0.15)',
    borderColor: '#9ca3af',
    borderWidth: 2,
    borderDash: [5, 5],
    pointBackgroundColor: '#9ca3af',
    pointBorderColor: '#fff',
    pointBorderWidth: 2,
    pointRadius: 4,
    pointHoverRadius: 6
  }]
}));

// 创建雷达图的函数
const createRadarChart = (canvas: HTMLCanvasElement, data: any, options: any) => {
  const ctx = canvas.getContext('2d');
  if (!ctx) return null;

  return new Chart(ctx, {
    type: 'radar',
    data,
    options
  });
};

// 初始化图表
const initCharts = async () => {
  await nextTick();

  if (blueChartRef.value) {
    blueChart = createRadarChart(blueChartRef.value, blueChartData.value, radarChartOptions);
  }

  if (yellowChartRef.value) {
    yellowChart = createRadarChart(yellowChartRef.value, yellowChartData.value, radarChartOptions);
  }

  if (redChartRef.value) {
    redChart = createRadarChart(redChartRef.value, redChartData.value, radarChartOptions);
  }
};

// 组件挂载时初始化
onMounted(async () => {
  try {
    // 模拟获取数据
    const res = await getInterviewScore(resumeId);
    // console.log(res)
    blueData.value = res.data.coreAbilityScores;
    yellowData.value = res.data.professionalSkillScores;
    redData.value = res.data.jobPerformanceScores;

    // 初始化图表
    await initCharts();

  } catch (err) {
    console.error('获取面试评分数据失败:', err);
    // 使用默认数据初始化图表
    await initCharts();
  }
});
</script>

<style lang="scss" scoped>
/* 全局容器样式 */
.radar-chart-container {
  min-height: 100vh;
  width: 100vw;
  //background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #e8f4f8 100%);
  padding: 2rem;
  font-family: 'Inter', 'PingFang SC', sans-serif;
  display: flex;
  align-items: center;
}


/* 图表网格布局 */
.radar-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto 3rem;
}

/* 单个雷达图卡片 */
.radar-chart {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out;
}

.radar-chart:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.radar-chart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--chart-color), var(--chart-color-light));
}

.blue-chart {
  --chart-color: #3b82f6;
  --chart-color-light: #93c5fd;
  border-color: rgba(59, 130, 246, 0.1);
}

.yellow-chart {
  --chart-color: #f59e0b;
  --chart-color-light: #fbbf24;
  border-color: rgba(245, 158, 11, 0.1);
}

.red-chart {
  --chart-color: #ef4444;
  --chart-color-light: #f87171;
  border-color: rgba(239, 68, 68, 0.1);
}

/* 图表头部 */
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.chart-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.blue-icon {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.yellow-icon {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.red-icon {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
}

.icon-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--chart-color);
}

.radar-chart-title {
  text-align: center;
}

.radar-chart-title h2 {
  color: #1f2937;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
}

.chart-subtitle {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
  font-weight: 500;
}

/* 图表画布容器 */
.chart-canvas-wrapper {
  position: relative;
  height: 320px;
  margin-bottom: 2rem;
}

.radar-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* 图例样式 */
.legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.legend-color {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.legend-color.blue {
  background: #3b82f6;
}

.legend-color.yellow {
  background: #f59e0b;
}

.legend-color.red {
  background: #ef4444;
}

.legend-color.standard {
  background: #9ca3af;
  border: 2px dashed #9ca3af;
  background: transparent;
}

/* 统计摘要 */
.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  //box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  //border: 1px solid rgba(255, 255, 255, 0.2);
  //transition: all 0.3s ease;
}

.stat-card:hover {
  //transform: translateY(-4px);
  //box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.blue-stat .stat-value {
  color: #3b82f6;
}

.yellow-stat .stat-value {
  color: #f59e0b;
}

.red-stat .stat-value {
  color: #ef4444;
}

.stat-label {
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
}

/* 评分依据 */
.rating-notes {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.notes-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.notes-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #e0f2fe, #b3e5fc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0369a1;
}

.notes-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.rating-notes h3 {
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.rating-notes p {
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .radar-chart-container {
    padding: 1rem;
  }

  .main-title {
    font-size: 2rem;
  }

  .radar-charts {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .radar-chart {
    padding: 1.5rem;
  }

  .chart-canvas-wrapper {
    height: 280px;
  }

  .stats-summary {
    grid-template-columns: 1fr;
  }

  .legend {
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .chart-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .legend {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}
</style>